<template>
  <div class="outer">
    <div id="rate">
      <div class="title">
        <h1>{{$t('myAdd.rate.title')}}</h1>
        <hr>
      </div>
      <div class="content">
        <h3>{{$t('myAdd.rate.inmoneyRate')}}</h3>
        <p>{{$t('myAdd.rate.free')}}</p>
        <h3>{{$t('myAdd.rate.exchangeRate')}}</h3>
        <p class="des">Maker ：  {{$t('myAdd.rate.maker')}}</p>
        <p class="des">Taker ：  {{$t('myAdd.rate.taker')}}</p>
        <p class="des">Maker-Taker ：  {{$t('myAdd.rate.maker-taker')}}</p>
        <p class="remind">* {{$t('myAdd.rate.rateDes')}}</p>
        <table class="feeTable">
          <thead>
            <tr>
              <td>{{$t('myAdd.rebate.MoneyFor')}}</td>
              <td>Maker</td>
              <td>Taker</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tradeFee" :key="index">
              <td>{{item.symbol}}</td>
              <td>{{item.TRADE_MAKER_VIP0}}%</td>
              <td>{{item.TRADE_TAKER_VIP0}}%</td>
            </tr>
          </tbody>
        </table>
        <h3 class="outMoney">{{$t('myAdd.rate.outMoney')}}</h3>
        <table class="coinTable">
          <thead>
            <tr>
              <td>{{$t('myAdd.rate.currency')}}</td>
              <td>{{$t('myAdd.rate.minOut')}}</td>
              <td>{{$t('myAdd.rate.coin-fee')}}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in digiccyFee" :key="index">
              <td><img :src="coinlist[item.symbol] && coinlist[item.symbol].icon || imgSrc" alt="">{{item.symbol}}</td>
              <td>{{item.DIGICCY_MIN_AMOUNT}}</td>
              <td>{{item.DIGICCY_DEFAULT_AMOUNT}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import coinImg from '@/assets/img/coindef.png'
export default {
  name: 'rate',
  data () {
    return {
      imgSrc: coinImg,
      tradeFee: [],
      digiccyFee: []
    }
  },
  mounted () {
    this.getFee()
  },
  computed: {
    ...mapState({
      coinlist ({baseData: {_coinList}}) { // 场外币种列表
        return _coinList || false
      }
    })
  },
  methods: {
    getFee () {
      this.axios({
        url: this.$store.state.url.rate.coinFee
      }).then((res) => {
        if (res.code.toString() === '1') {
          this.tradeFee = res.tradeFee
          this.digiccyFee = res.digiccyFee
          this.tradeFee.forEach((item) => {
            item.symbol = item.symbol.toUpperCase()
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
  div.outer{
    background: #182540;
    padding-bottom: 50px;
    color: #B7C2CE;
    min-height: 700px;
  }
  #rate{
    margin:0 auto;
    width: 82%;
    max-width:1200px;
  }
  #rate .title{
    padding-top:30px;
  }
  #rate .title .time{
    color:#3A4865;
  }
  #rate .title h1{
    text-align:center;
  }
  #rate .title hr{
    margin-top:15px;
    background:#3F4D6B;
  }
  /*内容区域*/
  #rate .content{
    margin-top:20px;
  }
  #rate .content h3{
    position:relative;
    text-indent:10px;
    line-height:26px;
    font-weight:bold;
  }
  #rate .content h3::before{
    position:absolute;
    left:0px;
    top:7px;
    content:'';
    border-width:5px 5px 5px 5px;
    border-color:transparent transparent  transparent #fff;
    border-style:solid solid solid solid;
  }
  #rate .content p{
    line-height:20px;
    text-indent:10px;
  }
  #rate .content table{
    width: 100%;
    margin:20px 0 0;
    border-collapse:collapse;
    border-spacing:0;
  }
  #rate .content table tr{
    height:35px;
    line-height:35px;
    text-align:center;
  }
  #rate .content table tr td{
    width: 33.33%;
    border:1px solid #313C52;
  }
  #rate .content p.des{
    position:relative;
  }
  #rate .content p.des::before {
    position: absolute;
    left: 0px;
    top: 8px;
    content:'';
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius:50%;
  }
  #rate .content p.remind{
    color:#fff;
    text-indent:0;
    font-weight:bold;
  }
  #rate .content .feeTable td:nth-child(1){
    text-align: left;
    text-indent: 20px;
  }
    /*币种表格区域*/
  h3.outMoney{
    margin-top:20px;
  }
  #rate .content .feeTable thead,
  #rate .content .coinTable thead{
    color:#6C7684;
    font-weight:bold;
    background: #202C43;
  }
  #rate .content .coinTable td{
    text-align:left;
    text-indent:20px;
  }
  #rate .content .coinTable tbody img{
    width: 20px;
    height: 20px;
    vertical-align:middle;
    margin-right:5px;
  }
  #rate .content .feeTable tbody tr:nth-child(2n),
  #rate .content .coinTable tbody tr:nth-child(2n){
    background: #202C43;
  }
</style>
